import React from 'react';
import {connect} from 'dva';
import {Form, Input, InputNumber} from 'antd';
import {message} from 'antd/lib/index';
const R = require("ramda");

const lgOdSi = Form.create()(class LgOdSi extends React.Component {
    constructor(props) {
        super(props);
    }


    handleResetFields = () => {
        this.props.form.resetFields();
    }


    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            let dataSource = this.props.logisticsOrder.dataSource.odSi ? this.props.logisticsOrder.dataSource.odSi : {};
            if (errors) return;

            let payload = {
                id: dataSource.id,
                ...values,
                onSuccess: (data) => {
                    this.props.handleCancel();
                },

                onFail: (data) => {
                    this.props.handleCancel();
                },

            };

            if (!R.equals(R.pick(Object.keys(values), dataSource), values)) {
                this.props.dispatch({
                    type: "logisticsOrder/updateOdsi",
                    payload: payload
                });
            } else {
                message.info("您未修改任何补料信息！");
                //this.props.handleCancel();
            }

        });
    }


    render() {
        const {getFieldDecorator} = this.props.form;
        let dataSource = this.props.logisticsOrder.dataSource.odSi ? this.props.logisticsOrder.dataSource.odSi : {};
        const divWithOutBorderBottom = {
            display: 'flex',
            borderRight: '1px solid #e9e9e9',
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderSpacing: 0,
            lineHeight: 3.5,
            textAlign: 'left',
        }

        const columnBreak = {
            display: 'flex',
            borderRight: '1px solid #e9e9e9',
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderSpacing: 0,
            textAlign: 'left',
        }

        const fileBorderBottom = {
            display: 'flex',
            borderRight: '1px solid #5993F4',
            borderLeft: '1px solid #5993F4',
            borderBottom: '1px solid #5993F4',
            borderTop: '1px solid #5993F4'
        }
        return (
            <div>
                <Form>
                    <div style={Object.assign({}, {marginTop: 10, marginBottom: 18, width: '100%'}, fileBorderBottom)}>
                        <div style={{width: '90%', marginLeft: 50}}>
                            <div style={{textAlign: 'left', marginTop: 20, marginBottom: 10}}>
                                <div><span><b><font size="2">GUANGZHOU HENDA SPECIALTY OF SUPPLY CHAIN MANAGEMENT CO, LTD</font></b></span>
                                </div>
                            </div>

                            <div style={Object.assign({}, {lineHeight: 3.5}, columnBreak)}>
                                <div style={{width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Shipper &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('shipper', {
                                                        initialValue: dataSource.shipper
                                                    })(
                                                        <Input.TextArea maxLength="500" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '82%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 6}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '55%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Bill Of Lading No&nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('ladingBill', {
                                                        initialValue: dataSource.ladingBill
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '75%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Booking No &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('soNo', {
                                                        initialValue: dataSource.soNo
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '81%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Export Reference &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('exportReference', {
                                                        initialValue: dataSource.exportReference
                                                    })(
                                                        <Input maxLength="200" disabled={this.props.disabled} style={{
                                                            width: '75%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>

                            <div style={Object.assign({}, {lineHeight: 2}, columnBreak)}>
                                <div style={{width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Consignee &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('consignee', {
                                                        initialValue: dataSource.consignee
                                                    })(
                                                        <Input.TextArea maxLength="500" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '79%',
                                                                            marginTop: 15,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 6, maxRows: 9}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '27%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Pre-Carriage by&nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('preCarriage', {
                                                        initialValue: dataSource.preCarriage
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Vessel/Voyage Number: &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('vessel', {
                                                        initialValue: dataSource.vessel
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '28%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Place Of Receipt &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('receiptPlace', {
                                                        initialValue: dataSource.receiptPlace
                                                    })(
                                                        <Input maxLength="200" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Port Of Loading &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('loadingPort', {
                                                        initialValue: dataSource.loadingPort
                                                    })(
                                                        <Input maxLength="50" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>

                            <div style={Object.assign({}, {lineHeight: 2}, columnBreak)}>
                                <div style={{width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Notify Party &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('notifyParty', {
                                                        initialValue: dataSource.notifyParty
                                                    })(
                                                        <Input.TextArea maxLength="500" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '76%',
                                                                            marginTop: 15,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 6}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '27%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Port Of Discharge &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('destinationPort', {
                                                        initialValue: dataSource.destinationPort
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Number of original B/Ls &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('originalBilllNum', {
                                                        initialValue: dataSource.originalBilllNum
                                                    })(
                                                        <InputNumber maxLength="11" disabled={this.props.disabled}
                                                                     style={{
                                                                         width: '95%',
                                                                         marginTop: 5,
                                                                         marginBottom: 5,
                                                                         textAlign: 'center'
                                                                     }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '28%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Place of Delivery  &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('deliveryPlace', {
                                                        initialValue: dataSource.deliveryPlace
                                                    })(
                                                        <Input maxLength="200" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Merchant Declared Value &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('declaredValue', {
                                                        initialValue: dataSource.declaredValue
                                                    })(
                                                        <Input maxLength="300" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>


                            <div style={divWithOutBorderBottom}>
                                <div style={{
                                    width: '100%',
                                    marginLeft: 10,
                                    borderRight: '1px solid #e9e9e9',
                                    textAlign: 'center'
                                }}>
                                    <div>PARTICULARS FURNISHED BY SHIPPER</div>
                                </div>
                            </div>

                            <div style={divWithOutBorderBottom}>
                                <div style={{width: '20%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Container Nos./Seal Nos.<br/>
                                        Marks & Nos.
                                        <span>
                                                    {getFieldDecorator('containerNos', {
                                                        initialValue: dataSource.containerNos
                                                    })(
                                                        <Input.TextArea maxLength="100" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '93%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 7}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '15%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Quantity/Number of
                                        <br/> Packages
                                        <span>
                                                    {getFieldDecorator('packagesNum', {
                                                        initialValue: dataSource.packagesNum
                                                    })(
                                                        <Input.TextArea maxLength="11" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '91%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 7}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '30%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Description of Goods
                                        <span>
                                                    {getFieldDecorator('goosDesc', {
                                                        initialValue: dataSource.goosDesc
                                                    })(
                                                        <Input.TextArea maxLength="300" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '95%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 7, maxRows: 9}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '15%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Gross Weight
                                        <br/> KGS
                                        <span>
                                                    {getFieldDecorator('grossWeight', {
                                                        initialValue: dataSource.grossWeight
                                                    })(
                                                        <Input.TextArea maxLength="100" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '91%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 7}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '20%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>Measurement
                                        <br/> CBM
                                        <span>
                                                    {getFieldDecorator('measurement', {
                                                        initialValue: dataSource.measurement
                                                    })(
                                                        <Input.TextArea maxLength="18" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '92%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 5, maxRows: 7}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>

                            <div style={divWithOutBorderBottom}>
                                <div style={{width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div style={{lineHeight: '20px'}}>Total No.of containers or
                                        <br/>packages （in words） :
                                        <span>
                                                    {getFieldDecorator('containerNosDesc', {
                                                        initialValue: dataSource.containerNosDesc
                                                    })(
                                                        <Input.TextArea maxLength="300" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '92%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 3, maxRows: 4}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{width: '50%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>SHIPPED ON BOARD DATE :
                                        <span>
                                                    {getFieldDecorator('etdDate', {
                                                        initialValue: dataSource.etdDate
                                                    })(
                                                        <Input maxLength="100" disabled={this.props.disabled} style={{
                                                            width: '95%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>

                            <div style={Object.assign({}, {
                                lineHeight: 6,
                                borderBottom: '1px solid #e9e9e9',
                                marginBottom: 20
                            }, columnBreak)}>
                                <div style={{width: '40%', marginLeft: 10, borderRight: '1px solid #e9e9e9'}}>
                                    <div>FREIGHT & CHARGES
                                        <span>
                                                    {getFieldDecorator('freightCharges', {
                                                        initialValue: dataSource.freightCharges
                                                    })(
                                                        <Input.TextArea maxLength="300" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '90%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 3, maxRows: 4}}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Agent's Address at Destination :
                                        <span>
                                                    {getFieldDecorator('destinationPortAgency', {
                                                        initialValue: dataSource.destinationPortAgency
                                                    })(
                                                        <Input.TextArea maxLength="300" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '90%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 7, maxRows: 8}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                                <div style={{
                                    width: '60%',
                                    marginLeft: 10,
                                    borderRight: '1px solid #e9e9e9',
                                    lineHeight: '20px'
                                }}>
                                    <div>
                                        Received in apparent good order and condition except as otherwise noted the
                                        total number of containers or other packages or units enumerated below for
                                        transportation from the place of receipt to the place of delivery subject to the
                                        terms and conditions hereof.
                                        One of the Bills of Lading must be surrendered duly endorsed in exchange for the
                                        goods or delivery order.
                                        On presentation of this document duly endorsed to Carrier by or on behalf of the
                                        Holder of the Bill of Lading, the rights and liabilities arising in accordance
                                        with the terms and conditions here of shall, without prejudice to any rule of
                                        common law or statute rendering them binding on the Merchant, become binding in
                                        all respects between the Carrier and the Holder of the Bill of Lading as though
                                        the contract evidenced hereby had been made between them.
                                        IN WITNESS whereof the number of original Bill of Lading stated under have been
                                        signed all of this tenor and date, one of which being accomplished.
                                        The other(s) is to be void.
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>PLACE & DATE OF ISSUE : &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('issuePlace', {
                                                        initialValue: dataSource.issuePlace
                                                    })(
                                                        <Input maxLength="300" disabled={this.props.disabled} style={{
                                                            width: '67%',
                                                            marginTop: 5,
                                                            marginBottom: 5,
                                                            textAlign: 'center'
                                                        }}/>
                                                    )}
                                                </span>
                                    </div>
                                    <div style={{borderTop: '1px solid #e9e9e9'}}>Agent for the Carrier: &nbsp;&nbsp;
                                        <span>
                                                    {getFieldDecorator('carrierAgency', {
                                                        initialValue: dataSource.carrierAgency
                                                    })(
                                                        <Input.TextArea maxLength="300" disabled={this.props.disabled}
                                                                        style={{
                                                                            width: '72%',
                                                                            marginTop: 5,
                                                                            marginBottom: 5,
                                                                            textAlign: 'center'
                                                                        }} autosize={{minRows: 3, maxRows: 4}}/>
                                                    )}
                                                </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Form>
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.logisticsOrder, logisticsOrder: state.logisticsOrder
    };
}

export default connect(mapStateToProps)(lgOdSi);